/*
*代码思路:
* 1.定义模板字符串itemTmpl和初始化函数init()
* 2.获取左边菜单列表json数据:getContentList(),此处数据要传给全局变量window.food_spu_tags,因为right.js需要
* 	调用;
* 3.渲染左边菜单列表:initContentList(),此处将左边菜单列表模板内容替换,同时将右边内容数据挂载上去.
* 	挂载语法:$(selector).data(name,value)
* 4.渲染左边菜单内容项:getItemContent(),左边菜单列表模板内容替换的实现方法
* 5.点击左边菜单事件监听:addClick(),实现点击效果,点击的内容样式改变,其他内容样式恢复默认.
* 	点击后返回挂载数据  语法:$(selector).data(name)
* 6.调用初始化函数:init()
 */
(function () {
	//定义左边点菜分类模板字符串
	var itemTmpl = '<div class="left-item">' +
						'<div class="item-text">$getItemContent</div>'+
					'</div>';

	/*
	*获取左边菜单分类数据
	 */
	function getContentList() {
		$.get('/MeituanPR/json/food.json',function(data){
			console.log(data);
			//全局变量定义
			window.food_spu_tags = data.data.food_spu_tags || [];
			initContentList(food_spu_tags);

		})
	}

	/*
	*渲染左边菜单列表
	 */
	function initContentList(list) {
		list.forEach(function (item,index) {
			var str = itemTmpl.replace('$getItemContent',getItemContent(item));
			//转换为JQuery对象:该JQuery对象为左边列表菜单所有内容
			var $target = $(str);

			//向元素附加数据:向被选元素附加数据。语法:$(selector).data(name,value)
			//参数name	必需。规定要设置的数据的名称。
			//参数value	必需。规定要设置的数据的值。

			//Jquery对象挂载数据:将定义的数据挂载到左边菜单列表项上,数据名称为itemData,数据值为item
			$target.data('itemData',item);

			$('.left-bar-inner').append($target);
		});

		//默认'点击'展示左边菜单列表第一项,和第一项的数据内容
		$('.left-item').first().click();
	}

	/*
	*点击事件监听
	 */
	function addClick() {
		$('.menu-inner').on('click','.left-item',function (e) {
			//选中当前目标
			var $target = $(e.currentTarget);

			$target.addClass('active');
			$target.siblings().removeClass('active');

			// 从元素返回数据:从被选元素中返回附加的数据。语法:$(selector).data(name)
			//	参数name	可选。规定要取回的数据的名称。如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。

			//将数据传给右侧详情列表进行渲染:定义window全局变量Right下的refresh方法刷新数据
			//取回数据名称为itemData
			window.Right.refresh($target.data('itemData'));
			//刷新数据为左边菜单列对应的详情内容 console.log($target.data('itemData'));

		})
	}


	/*
	*渲染左边菜单列表内容
	 */
	function getItemContent(data) {
		if (data.icon) {
			return '<img class="item-icon" src='+data.icon+' />' + data.name;
		}else {
			return data.name;

		}
	}

	function init() {
		getContentList();
		addClick();
	}

	init();
})();